<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="utf-8" />
		<title>使用DOM操作html</title>
	</head>
	<body>
		<h1>使用DOM操作网页</h1>
		<h2>1 获取dom元素</h2>
		<h2>2 修改或获取html内容 innerHTML innerText  修改或获取属性</h2>
		<div id="div1">
			获取dom元素
		</div>
		
		<img id="img1" src="img/04.jpeg" width="100" />
		
		<input type="text" name="phone" id="phone" />
		
		
		<h1>赠汪伦</h1>
		<p class="class1">李白乘舟将欲行</p>
		<p class="class1">忽闻岸上踏歌声</p>
		<p>桃花潭水深千尺</p>
		<p>不及汪伦送我情</p>
		
		<input type="button" value="第一种方式getElementById" onclick="click1()" />
		<input type="button" value="第二种方法getElementsByClassName" onclick="click2()" />
		<input type="button" value="第三种方法getElementsByTagName" onclick="click3()" />
		<input type="button" value="修改获取属性1" onclick="click4()" />
		<input type="button" value="修改获取属性2" onclick="click5()" />
		<script type="text/javascript">
			function click1(){
				//第一种获取getElementById
				var div1=document.getElementById("div1");
				//div1.innerHTML="<h3 style='color: red;'>javascript是一门脚本语言</h3>";
				div1.innerText="<h3 style='color: red;'>javascript是一门脚本语言</h3>";
			}
			
			function click2(){
				var ps=document.getElementsByClassName("class1");
				console.log(ps.length);
				//console.log(ps);
				for(var i=0;i<ps.length;i++){
					var p=ps[i];
					alert(p.innerHTML);
				}
			}
			function click3(){
				
				var ps2=document.getElementsByTagName("p");
				console.log(ps2.length);
				
				for(var i=0;i<ps2.length;i++){
					alert(ps2[i].innerHTML);
				}
			}
			function click4(){
				var img1=document.getElementById("img1");
				console.log(img1.src);
				img1.src="img/01.jpg";
			}
			
			function click5(){
				var phone=document.getElementById("phone");
				phone.value="110";
				console.log(phone.value);
			}
			
			
		</script>
		
	</body>
</html>
